<template>
    <div class="list" >
       <ul>
           <li class="item" 
                v-for="item of lesttr" 
                :key="item"
                :ref="item"
                @touchstart.prevent="handtouchstart"
                @touchmove="handletouchmove"
                @touchend="handletouchend"
                @click="handclick"
                >{{item}}</li>
       </ul>  
    </div>
</template>

<script>

export default {
    name:'cityalphabet',
    props:{
        aases:Object
    },
    data(){
        return{
            touchstart:false  ,
						startY:0 ,//A坐标的位置固定 截流
						timer:null
        }
    },
		updated(){ //
			this.startY=this.$refs['A'][0].offsetTop;//获取第一个数字的离父元素的高度
		},
    computed:{
        lesttr(){
            const lesttr=[]
            for(let i in this.aases){
                lesttr.push(i)
            }
						// console.log(lesttr) 循环k值
            return lesttr
        }
    },
    methods:{
        handclick(e){
           this.$emit('change',e.target.innerText)
        },
        handtouchstart(e){
            this.touchstart=true
        },
        handletouchmove(e){
            if(this.touchstart){
							
							 if(this.timer){ 
								   clearTimeout(this.timer)
								 }
								 
							 this.timer=setTimeout(()=>{
									 const touchy=e.touches[0].clientY-79  //获取中间的高度 手指距离顶部的距离
									 const indexr =Math.floor((touchy-this.startY)/20)//每一个字母的高度
									 if(indexr>=0 && indexr <this.lesttr.length ){ 
									 		this.$emit('change',this.lesttr[indexr]) //触发事件
									 }
								 },16)
                   
								}
            
        },
        handletouchend(e){
            this.handletouchend=false
        }
    }
    
}
</script>


<style lang="stylus" scoped>
       @import '~styles/varibles.styl' 
      .list
        display flex
        flex-direction column
        justify-content center
        position absolute
        right 0
        top 1.6rem
        bottom 0
        width .4rem
        .item
            text-align center
            line-height .44rem
            color #000


                
       
       




</style>



